<template>
  <div class="flex " style="display: flex; height: 99%;">
    <el-card shadow="never" class="box-card flex" style="width: 290px;">
      <div class="flex" style="margin-bottom: 1rem; justify-content:flex-start;flex-wrap:wrap">
        <el-button size="mini" @click="toExpandAll('是')">
          <i class="el-icon-plus" style="color: #606266" />
          <span style="color: #606266">全部展开</span>
        </el-button>

        <el-button size="mini" @click="toExpandAll('否')">
          <i class="el-icon-minus" style="color: #606266" />
          <span style="color: #606266">全部收起</span>
        </el-button>

        <el-button size="mini" @click="toRefreshGridTree" style="margin-top:2%">
          <i class="el-icon-refresh" style="color: #606266" />
          <span style="color: #606266">刷新</span>
        </el-button>
      </div>
      <el-input v-model="gridName" style="margin-bottom: 1rem" placeholder="请输入网格名称" prefix-icon="el-icon-search"
        class="filter-item search-item" @keyup.native="toSearchGridTree" />
      <div style="margin-right: 0px; overflow: auto" :style="{ height: gridTreeHeight }" class="box-card">
        <div v-show="showRightMenu">
          <ul id="menu" class="right-menu">
            <li class="menu-item" @click="toClickRightMenu('绑定设备点位')">
              <i class="iconfont icon-kuaijie-shebeibangdingdianwei" style="margin-right: 4px; font-weight: bold"></i>
              绑定设备点位
            </li>
          </ul>
        </div>

        <el-tree ref="refGridTree" :data="gridTree" node-key="id" :filter-node-method="filterNode"
          :highlight-current="highlightCurrent" :expand-on-click-node="expandOnClickNode" :default-expand-all="expandAll"
          @node-contextmenu="rightClick" @node-click="nodeClick" @node-expand="nodeExpand"
          @node-collapse="nodeCollapse" />
      </div>
    </el-card>
    <el-card class="box-card flex" style="flex: 1;margin:10px 10px 0 10px;height: 99%;">
      <el-form size="small" label-position="right" style="height: 5%;">
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备名称" label-width="70px">
              <el-input v-model="deviceName" placeholder="设备名称" clearable class="filter-item search-item" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="margin-left: 10px">
              <el-button type="primary" icon="el-icon-search" @click="toSearch" style="margin-right: 10px">搜索</el-button>
              <el-button type="info" icon="el-icon-delete" @click="toReset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tabs v-model="activeName" @tab-click="handleClick" style="height: 95%;">
        <el-tab-pane label="空调" name="first" style="height: 95%;"><air-conditioner /></el-tab-pane>
        <el-tab-pane label="照明" name="second" style="height: 95%;">
          <lighting />
        </el-tab-pane>
      </el-tabs>

    </el-card>
  </div>
</template>
<script>
import GridManageApi from "@/api/grid-manage";
import AirConditioner from "./components/AirConditioner.vue"
import Lighting from "./components/Lighting.vue"
export default {
  components: {
    AirConditioner,
    Lighting
  },
  data() {
    return {
      gridName: "",
      gridTreeHeight: this.getHeightAndWidth(),
      showRightMenu: false,
      gridTree: [],
      highlightCurrent: true,
      expandOnClickNode: false,
      expandAll: false,
      panelActive: false,
      deviceName: '',
      activeName: 'first'
    };
  },
  mounted() {
    this.getGridTree();
  },
  methods: {
    handleClick() {

    },
    toReset() {
      this.searchModel = {};
      this.$refs.elTable.clearSort();
      this.$refs.elTable.clearFilter();
      this.toSearch();
    },
    toSearch() {
      this.pagination.pageNum = 1;
      this.getDataList();
    },
    getHeightAndWidth() {
      let clientHeight = 0;
      if (
        document.body.scrollHeight === window.screen.height &&
        document.body.scrollWidth === window.screen.width
      ) {
        clientHeight = window.screen.height - 5; // 网页可见区域高
      } else {
        clientHeight = document.body.clientHeight - 5; // 网页可见区域高
      }
      return clientHeight - 310 + "px";
    },
    nodeClick() {
      this.closeRightMenu();
    },
    nodeExpand() {
      this.closeRightMenu();
    },
    nodeCollapse() {
      this.closeRightMenu();
    },
    rightClick(event, data, node, obj) {
      this.$refs.refGridTree.setCurrentKey(data.id);

      this.showRightMenu = false; // 先把模态框关死，目的是：第二次或者第n次右键鼠标的时候 它默认的是true
      this.showRightMenu = true;
      const menu = document.querySelector("#menu");
      menu.style.left = event.clientX - 250 + "px";
      menu.style.top = event.clientY - 0 + "px";
      // 给整个document添加监听鼠标事件，点击任何位置执行closeRightMenu方法，及时将菜单关闭
      document.addEventListener("click", this.closeRightMenu);
      // console.log('event', event, event.clientX, event.clientY)
      // console.log('data', data)
      // console.log(node)

      this.selectNodeData = data;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    toClickRightMenu(type) {
      if (type === "绑定设备点位") {
        this.isShowBinding = true;
      }
    },
    toSearchGridTree() {
      this.$refs.refGridTree.filter(this.gridName);
    },
    toRefreshGridTree() {
      this.gridName = "";
      this.getGridTree();
    },
    toExpandAll(text) {
      if (text === "是") {
        this.expandAll = true;
      } else {
        this.expandAll = false;
      }
      for (
        var i = 0;
        i < this.$refs.refGridTree.store._getAllNodes().length;
        i++
      ) {
        this.$refs.refGridTree.store._getAllNodes()[i].expanded =
          this.expandAll;
      }
    },
    getGridTree() {
      GridManageApi.getGridTree()
        .then((res) => {
          this.gridTree = res.data.data.rows;
        })
        .catch(() => {
          this.gridTree = [];
        });
    },
  },
};
</script>
<style lang="scss" scoped></style>
<style>
.el-card__body {
  height: 100%;
}

.el-tabs__content {
  height: 100%;

}

.el-tabs__nav-wrap {
  overflow: hidden;
  margin-bottom: -1px;
  position: relative;
  width: 100%;
}
</style>
<style></style>